<template>
  <div class="box">
    <div class="query-box">
      <div class="line-center">
        <el-row>
          <el-form ref="form" :model="oldQueryForm" size="small" label-width="70px">
            <el-col :span="4">
              <el-form-item label="老人姓名" style="width: 220px;">
                <el-input clearable v-model="oldQueryForm.userName" placeholder="请输入老人姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="性别" style="width: 190px">
                <el-select clearable v-model="oldQueryForm.sex" placeholder="请选择性别">
                  <el-option label="女" value="0"></el-option>
                  <el-option label="男" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="政治面貌" style="width: 210px">
                <el-select clearable v-model="oldQueryForm.politicalStatus" placeholder="请选择发布状态">
                  <el-option v-for="(item, index) in oldsterStatus" :key="index" :label="item.statusName"
                    :value="item.id"></el-option>
                  <!-- <el-option label="已发布" value="1"></el-option> -->
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button type="primary" plain @click="querySubmit" icon="el-icon-search">搜索</el-button>
              </el-form-item>
            </el-col>

            <!-- <el-col :span="3"></el-col> -->
            <el-col :span="6">
              <el-button @click="HandleBatchDelete" type="danger" plain size="small"
                icon="el-icon-delete">批量删除</el-button>
            </el-col>
            <el-col :span="3">
              <el-button @click="showDrawer" type="success" plain size="small" icon="el-icon-plus">添加老人</el-button>
            </el-col>
          </el-form>
        </el-row>
      </div>
    </div>

    <!-- 数据列表 -->
    <div class="table">
      <TableComponent @columnIds="getColumnIds" :loading="tableLoading" :table-data="oldRespData" :column="oldColumn">
        <template v-slot:operate="{ row }">
          <el-button @click="changeOldCoumn(row.id)" type="text" size="small">
            编辑
          </el-button>
          <el-button @click="deleteOld(row.id)" style="color: red;" type="text" size="small">
            删除
          </el-button>
        </template>
      </TableComponent>

      <PaginationComponent :page-query="oldQueryForm" :page-total="oldTotal" @handleSizeChange="sizeChange"
        @handleCurrentChange="currentChange"></PaginationComponent>
    </div>
    <!-- 侧边框 -->
    <DrawerComponent :image-url="oldForm.img" :old-status="oldsterStatus" :title="drawerTitleFlag ? '添加老人信息' : '编辑老人信息'"
      :form="oldForm" @handleClose="drawerClosed" @drawerSubmit="formSubmit" :config="drawerConfig"
      :form-column="oldFormColumn" :rules="rulesForm">

    </DrawerComponent>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import DrawerComponent from '@/components/DrawerComponent.vue';
import TableComponent from '@/components/TableComponent.vue';
import PaginationComponent from '@/components/PaginationComponent.vue';
import { queryOldById } from '@/api/admin/common'
import { message, messageType } from '@/utils/message'
export default {
  components: {
    DrawerComponent,
    TableComponent,
    PaginationComponent,
  },
  data() {
    return {
      oldQueryForm: {
        userName: '',
        sex: '',
        page: 1,
        pageSize: 10,
        isDelete: 0,
        politicalStatus: ''
      },
      oldForm: {
        userName: '',
        password: '',
        sex: '',
        phone: '',
        politicalStatus: '',
        img: '',
        address: '',

      },
      oldFormColumn: [
        { label: '用户名', prop: 'userName', inputType: 'text', placeholder: '请输入用户名', type: 'Input' },
        { label: '密码', prop: 'password', inputType: 'password', placeholder: '请输入密码', type: 'Input' },
        { label: '性别', prop: 'sex', placeholder: '请选择性别', optionLabel: [{ label: '女', value: '0' }, { label: '男', value: '1' }], type: 'Select', },
        { label: '电话号码', prop: 'phone', inputType: 'text', placeholder: '请输入电话号码', type: 'Input' },
        { label: '政治面貌', prop: 'politicalStatus', type: 'Select', placeholder: '请选择政治面貌', optionLabel: this.oldsterStatus },
        { label: '图片', prop: 'img', type: 'upload', placeholder: '请上传图片' },
        { label: '居住地址', prop: 'address', type: 'Input', placeholder: '请填写居住地址' },
      ],
      rulesForm: {
        userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        phone: [{ required: true, message: "请输入电话号码，号码为11位数", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        politicalStatus: [{ required: true, message: "请选择政治面貌", trigger: "blur" }],
        img: [{ required: true, message: "请上传图片", trigger: "blur" }],
        address: [{ required: true, message: "请填写居住地址", trigger: "blur" }],
      },
      oldColumn: [
        { prop: 'userName', label: '用户名', width: '120' },
        { prop: 'password', label: '密码', width: '120' },
        { prop: 'img', label: '图片', width: '120' },
        { prop: 'phone', label: '电话号码', width: '120' },
        { prop: 'sex', label: '性别', sex: ['女', '男'], width: '120' },
        { prop: 'politicalStatus', label: '政治面貌', width: '120' },
        { prop: 'address', label: '居住地址', width: '120' },
        { prop: 'createTime', label: '创建时间', width: '200' },
        { prop: 'updateTime', label: '修改时间', width: '200' },
        { prop: 'createUser', label: '创建人', width: '120' },
        { prop: 'updateUser', label: '修改人', width: '120' },
      ],
      tableLoading: true,
      drawerTitleFlag: true,
      drawerConfig: {
        size: '30%',
        drawer: false,
        direction: 'rtl',
      },
      ids: [],
    }
  },
  mounted() {
    this.pageQueryOldListActions(this.oldQueryForm);
    this.oldsterStatusActions();
  },
  computed: {
    ...mapState('old', ['oldRespData', 'oldTotal', 'oldsterStatus']),
  },
  methods: {
    ...mapActions('old', ["pageQueryOldListActions", "oldsterStatusActions", "addOldActions", "updateOldActions", "logicDeleteOldByIdActions", "logicBatchDeleteOldByIdsActions"]),

    formSubmit(form) {
      console.log('form-->', form);
      if (this.drawerTitleFlag) {
        this.addOldActions(form)
      } else {
        console.log(this.oldForm);
        this.updateOldActions(this.oldForm)
      }
      setTimeout(() => {
        this.drawerClosed();
        message(messageType().success, '操作成功');
        this.pageQueryOldListActions(this.oldQueryForm);
      }, 1000);
    },
    /**
     * 查询老人信息
     */
    querySubmit() {
      console.log(this.oldQueryForm);
      this.$store.dispatch('old/pageQueryOldListActions', this.oldQueryForm)
    },

    // 通过id获取老人信息
    async changeOldCoumn(id) {
      this.drawerTitleFlag = false;
      await queryOldById(id).then(resp => {
        if (!resp) return;
        console.log(resp);
        this.oldForm = resp.data.data;
        this.oldForm.sex = String(resp.data.data.sex);
        // this.oldForm.politicalStatus = String(resp.data.data.politicalStatus);
      }, error => {
        console.log(error);
      })
      this.drawerConfig.drawer = true;
    },
    deleteOld(id) {
      console.log('oldId-->', id);
      this.logicDeleteOldByIdActions(id);
      setTimeout(() => {
        message(messageType().success, '操作成功');
        this.pageQueryOldListActions(this.oldQueryForm);
      }, 500);
    },
    HandleBatchDelete() {
      this.logicBatchDeleteOldByIdsActions(this.ids)
      setTimeout(() => {
        message(messageType().success, '操作成功');
        this.pageQueryOldListActions(this.oldQueryForm);
      }, 1000);
    },
    getColumnIds(ids) {
      this.ids = ids;
    },
    // 关闭侧边框
    drawerClosed() {
      this.drawerConfig.drawer = false;
    },

    /**
     * 显示添加信息框
     */
    showDrawer() {
      this.drawerConfig.drawer = true;
    },

    /**
     *  分页查询
     */
    // 每页条数
    sizeChange(val) {
      this.oldQueryForm.pageSize = val;
      this.$store.dispatch('old/pageQueryOldListActions', this.oldQueryForm)
    },
    // 当前页
    currentChange(val) {
      this.oldQueryForm.page = val;
      this.$store.dispatch('old/pageQueryOldListActions', this.oldQueryForm)
    }
  },

}
</script>
<style lang="scss">
.box {
  width: 100%;

  .query-box {
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 55px;
    margin: 10px;

    .line-center {
      padding: 10px 10px 10px 5px;
    }
  }

  .table {
    margin: 10px;
    max-height: calc(100vh - 55px - 55px - 30px - 30px);
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .page-box {
      text-align: center;
    }

    // 表格图片
    .el-image__error,
    .el_image,
    img {
      width: 60px;
      height: 60px;
      // border-radius: 50%;
    }
  }
}
</style>